<!--
 * @Author: shaohang-shy
 * @Date: 2021-02-23 23:57:17
 * @lastEditors: shaohang-shy
 * @LastEditTime: 2021-02-24 23:07:34
 * @Description: demo05 事件处理
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ActiveLink Component
      class ActionLink extends React.Component {
        handleClick(e) {
          e.preventDefault();
          console.log("点我呀！哈哈哈。");
        }
        render() {
          return (
            <a href="#" onClick={this.handleClick}>
              点我呀
            </a>
          );
        }
      }
      /**
       * Toggle Component
       *
       * 你必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。
       * 这并不是 React 特有的行为；这其实与 JavaScript 函数工作原理有关。通常情况下，如果你没有在方法后面添加 ()，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。
       * 如果觉得使用 bind 很麻烦，这里有两种方式可以解决。如果你正在使用实验性的 public class fields 语法，你可以使用 class fields 正确的绑定回调函数：
       */
      class Toggle extends React.Component {
        constructor(props) {
          super(props);
          this.state = { isToggleOn: true };

          // 为了在回调中使用 `this`，这个绑定是必不可少的
          this.handleClick = this.handleClick.bind(this);
        }

        handleClick() {
          this.setState((state) => ({
            isToggleOn: !state.isToggleOn,
          }));
        }

        render() {
          return (
            <button onClick={this.handleClick}>
              {this.state.isToggleOn ? "ON" : "OFF"}
            </button>
          );
        }
      }
      // 如果你没有使用 class fields 语法，你可以在回调中使用箭头函数：
      // LoggingButton Component
      class LoggingButton extends React.Component {
        // 此语法确保 `handleClick` 内的 `this` 已被绑定。
        // 注意: 这是 *实验性* 语法。
        handleClick = () => {
          console.log("this is:", this);
        };

        render() {
          return <button onClick={this.handleClick}>Click me</button>;
        }
      }
      // LoggingButton2
      class LoggingButton2 extends React.Component {
        handleClick() {
          console.log("this is:", this);
        }

        render() {
          // 此语法确保 `handleClick` 内的 `this` 已被绑定。
          return <button onClick={() => this.handleClick()}>Click me</button>;
        }
      }

      ReactDOM.render(
        <div>
          <h2>ActionLink Component</h2>
          <ActionLink />
          <br />
          <h2>Toggle Component</h2>
          <Toggle />
          <br />
          <h2>LoggingButton Component</h2>
          <LoggingButton />
          <br />
          <h2>LoggingButton2 Component</h2>
          <LoggingButton2 />
        </div>,
        document.getElementById("example")
      );
    </script>
  </body>
</html>
